<div class="container" style="height: 100%;">
  <!-- CLOSE ICON -->
  <img class="container-close" src="{{deployUrl}}assets/img/end-year/reward/close.png" (click)="closeClick()" alt="关闭">
  <!-- TAB -->
  <div class="container-tab">
    <div class="container-tab__item" *ngFor="let tab of tabs;let i = index"
      [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/reward/tab-'+tab+'-'+(tab === curTab?'active':'inactive')+'.png)'"
      (click)="onTabClick(tab)">
    </div>
  </div>
  <!-- MAIN -->
  <div class="container-main"
    [ngStyle]="{background:'url('+deployUrl+'assets/img/end-year/reward/bg-header.png) center top/100% no-repeat,url('+deployUrl+'assets/img/end-year/reward/bg-footer.png) center bottom / 100% no-repeat,url('+deployUrl+'assets/img/end-year/reward/bg-center.png)  center 1.14rem / 100% calc(100% - 2.36rem) no-repeat'}">
    <div class="container-main--wrapper" #wrapper>
      <!-- BLOCK-1 -->
      <section *ngFor="let section of rewardsMap.get(curTab);let i = index">
        <!-- header:0 不显示 1,2...显示对应HEADER -->
        <div *ngIf="section.header" class="section-title"
          [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/reward/title-1-'+section.header+'.png)'">
        </div>
        <div class="section-main" *ngFor="let block of section.main"
          [ngStyle]="{background:'url('+deployUrl+'assets/img/end-year/reward/section-bg-header.png) center top/100% no-repeat,url('+deployUrl+'assets/img/end-year/reward/section-bg-footer.png) center bottom / 100% no-repeat,url('+deployUrl+'assets/img/end-year/reward/section-bg-center.png) center 1.6rem / 100% calc(100% - 2.9rem ) no-repeat'}">
          <div class="section-main--item">
            <div class="section-main__title">{{block.title}}</div>
            <div class="section-main__content">
              <ng-container *ngFor="let item of block.content">
                <!-- ITEM-i -->
                <!-- 默认大小 -->
                <div class="content-item" *ngIf="item.type===2">
                  <div class="content-item__main"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/reward/prize-bg.png)'">
                    <!-- PRIZE -->
                    <img [src]="deployUrl+'assets/img/end-year/reward/'+item.pic+'.png'" alt="奖品" class="main-pic">
                    <!-- TAGS -->
                    <div class="main-tag" *ngIf="item.validity"
                      [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/reward/tag-bg.png)'">
                      {{item.validity}}{{item.unit || '天'}}
                    </div>
                    <!-- NOTICES: 预览 -->
                    <div class="main-notice" *ngIf="item.canPreview"
                      (click)="playVideo('https://image.91banban.com/1638193342214hjwz.mp4')"
                      [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/reward/can-preview.png)'">
                    </div>
                    <!-- NOTICES: 首发 -->
                    <div class="main-notice" *ngIf="item.firstPublish"
                      [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/reward/first-publish.png)'">
                    </div>
                  </div>
                  <div class="content-item__name" [innerHtml]="item.name">
                  </div>
                </div>
                <!-- 大/中 -->
                <div class="content-item unique" *ngIf="item.type===1 || item.type===3"
                  [ngClass]="{'medium': item.type===3}">
                  <div class="content-item__main"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/reward/prize-bg-2.png)'">
                    <!-- PRIZE -->
                    <img [src]="deployUrl+'assets/img/end-year/reward/'+item.pic+'.png'" alt="奖品" class="main-pic">
                    <!-- TAGS -->
                    <div class="main-tag" *ngIf="item.validity"
                      [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/reward/tag-bg.png)'">
                      {{item.validity}}{{item.unit || '天'}}
                    </div>
                  </div>
                  <div class="content-item__name" [innerHtml]="item.name">
                  </div>
                </div>
              </ng-container>
            </div>
          </div>
        </div>
        <div class="section-tips" *ngIf="section.tips">
          <!-- TIPS -->
          <div class="section-tips__text">
            <p>注意事项</p>
            <p *ngFor="let tip of section.tips">{{tip}}</p>
          </div>
          <div class="section-tips__qrs">
            <div class="qrs-item">
              <img class="qrs-item--qr" [src]="deployUrl+'assets/img/end-year/common/service-qr.png'" alt="客服二维码">
              <div class="qrs-item--name">在线客服企业微信</div>
              <div class="qrs-item--name"></div>
            </div>
            <div class="qrs-item">
              <img class="qrs-item--qr" [src]="deployUrl+'assets/img/end-year/common/service-vip-qr.png'"
                alt="vip客服二维码">
              <div class="qrs-item--name">VIP客服企业微信</div>
              <div class="qrs-item--else">（服务30级以上用户）</div>
            </div>
          </div>
        </div>
      </section>

    </div>
  </div>
  <!-- video box -->
  <div style="visibility: hidden;height: 1px;overflow: hidden;position: fixed;">
    <video id="threeMp4video1" autoplay playsinline crossorigin="anonymous"></video>
  </div>
  <!-- video box -->
  <div id="giftMp4Box1" [hidden]="!videoShow" class="giftMp4Box"></div>
</div>